<template>
  <div class="slider-container">
    <div class="slider">
      <div
        v-for="(slide, index) in slides"
        :key="index"
        :class="['slide', { active: currentSlide === index }]"
        :style="
          slide.backgroundImage
            ? { backgroundImage: `url(${slide.backgroundImage})` }
            : { backgroundColor: slide.backgroundColor }
        "
        @click="handleSlideClick(slide)"
      >
        <div class="slide-content">
          <h2 v-if="!!slide.isShowTitle" :style="{ color: slide.titleColor }">{{ slide.title }}</h2>
          <p v-if="!!slide.isShowDescription" :style="{ color: slide.desColor }">
            {{ slide.description }}
          </p>
          <div
            v-if="!!slide.isShowButton"
            class="cta-btn cursor-pointer"
            @click:prev="handleSlideClick(slide)"
          >
            {{ slide.buttonText }}
          </div>
        </div>
      </div>

      <!-- 添加指示点 -->
      <div class="slider-dots">
        <span
          v-for="(slide, index) in slides"
          :key="index"
          :class="['dot', { active: currentSlide === index }]"
          @click="goToSlide(index)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { queryActiveCarouselList } from "@/api/system/carousel";
import { Carousel } from "@/api/system/carousel/type";
import router from "@/router";
import { ref, onMounted, onBeforeUnmount } from "vue";
defineOptions({
  name: "CarouselView",
});
const { viewCarousel } = defineProps({
  viewCarousel: {
    type: Object as PropType<Carousel>,
    default: () => {},
  },
});
const slides = ref<Carousel[]>([]);

const getCarouselList = async () => {
  if (viewCarousel) {
    slides.value = [viewCarousel];
    return;
  }
  const res = await queryActiveCarouselList();
  slides.value = res;
};
const currentSlide = ref(0);
let slideInterval: number | null = null;

// 自动切换轮播图
const startSlideShow = () => {
  slideInterval = window.setInterval(() => {
    currentSlide.value = (currentSlide.value + 1) % slides.value.length;
  }, 5000); // 5秒切换一次
};

// 点击指示点跳转到指定轮播图
const goToSlide = (index: number) => {
  currentSlide.value = index;

  // 重置定时器，避免自动切换干扰用户操作
  if (slideInterval) {
    clearInterval(slideInterval);
    slideInterval = null;
  }

  // 重新开始自动切换
  startSlideShow();
};
const handleSlideClick = (slide: Carousel) => {
  if (slide.isClickBackgroundLink) {
    if (slide.link.startsWith("http")) {
      ElMessage.success(`新开标签页跳转至{${slide.link}}`);
    } else {
      ElMessage.success(`路由跳转至{${slide.link}}`);
    }
  }
};
// 测试图片是否加载失败
const testImages = () => {
  const images = document.querySelectorAll("img");
  images.forEach((img) => {
    img.onerror = function () {
      // 如果图片加载失败，使用占位图
      //   (img as HTMLImageElement).src = 'https://via.placeholder.com/300x200/3498db/ffffff?text=教育平台';
    };
  });
};

onMounted(() => {
  getCarouselList();
  startSlideShow();
  testImages();
  // 确保轮播图在初始化时可见
  document.querySelector(".slider-container")?.classList.add("visible");
});

onBeforeUnmount(() => {
  if (slideInterval) {
    clearInterval(slideInterval);
  }
});
</script>

<style scoped>
.slider-container {
  width: 100%;
  margin-bottom: 30px;
  padding-top: 5px;
  opacity: 1;
  visibility: visible;
}

.slider {
  position: relative;
  height: 400px;
  overflow: hidden;
  width: 100%;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  background-size: cover;
  background-position: center;
}

.slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.slide.active {
  opacity: 1;
}

.slide-content {
  max-width: 800px;
  padding: 0 50px;
  text-align: center;
  animation: fadeInUp 0.8s ease-out;
  position: relative;
  z-index: 2;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
}

.slide p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  text-align: center;
  line-height: 1.6;
  opacity: 0.9;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.cta-btn {
  padding: 12px 30px;
  background-color: white;
  color: #3498db;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s;
  display: inline-block;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}

.cta-btn:hover {
  background-color: #f8f9fa;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* 指示点样式 */
.slider-dots {
  position: absolute;
  bottom: 25px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  z-index: 3;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.dot.active {
  background-color: white;
  transform: scale(1.2);
}

@media (max-width: 768px) {
  .slider {
    height: 350px;
  }

  .slide h2 {
    font-size: 2rem;
    margin-bottom: 15px;
  }

  .slide p {
    font-size: 1.1rem;
    margin-bottom: 25px;
  }

  .cta-btn {
    padding: 10px 25px;
    font-size: 1rem;
  }

  .dot {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 480px) {
  .slider {
    height: 300px;
  }

  .slide h2 {
    font-size: 1.8rem;
  }

  .slide p {
    font-size: 1rem;
    margin-bottom: 20px;
  }

  .slide-content {
    padding: 0 30px;
  }

  .slider-dots {
    bottom: 20px;
  }

  .dot {
    width: 8px;
    height: 8px;
  }
}
</style>
